<template>
  <div id="app">
  <vueHeader>Mint_demo</vueHeader>
   <div class="nav">
     <div class="nav-item"><router-link to="/" exact>首页</router-link></div>
      <div class="nav-item"><router-link to="/theme" exact>主题日报</router-link></div>
       <div class="nav-item"><router-link to="/hot" exact>热门消息</router-link></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<style>
body {
  margin: 0;
  font-size: 2rem;
  font-family: -apple-system, BlinkMacSystemFont,
               'avenir next', avenir,
               helvetica, 'helvetica neue',
               Ubuntu,
               'segoe ui', arial,
               sans-serif;
}
.page {
  text-align: center;
}
.nav{
  display:flex;
  height:40px;
  line-height:40px;
 .nav-item {
    flex:1;
    text-align:center;
   a {
      display:block;
     text-decoration: none;
     color:#000;
     &:hover, &:focus, &:active {
              color:#33a9d8;
              font-weight:bold;
              border-bottom:4px solid #33a9d8;
           }
   }
   .router-link-active{
      color:#33a9d8;
      font-weight:bold;
      border-bottom:4px solid #33a9d8;
   }
  }
}
code {
  background-color: #f0f0f0;
  padding: 3px 5px;
  border-radius: 2px;
}
</style>
<script>
  import VueHeader from '../components/Vue-header'
 import { Navbar, TabItem } from 'mint-ui';
  import 'mint-ui/lib/style.css';
export default {
  components: {
   VueHeader
  }
}
</script>
